<template>
    <div
        style="display: flex;flex-direction: column;height: 100%;width: 100%;background-color: white;border-radius: 10px;align-items: center;">
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;align-items: flex-start;">
            <el-checkbox style="margin: 10px;" v-model="smartBackground" @input="changeInput">启用智能背景去除</el-checkbox>
            <div style="display: flex;align-items: center;">
                <el-checkbox style="margin: 10px;" v-model="AIDrawing" :disabled="smartBackground"
                    @input="changeInput">启用AI绘像</el-checkbox>
                <el-tooltip content="AI 绘像可以将现实拍摄的图像转化为动漫形象，但生成的图像不能是透明图层的画像，并且该功能对显卡要求较高。" placement="bottom"
                    effect="light">
                    <el-button
                        style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                        circle>?</el-button>
                </el-tooltip>
            </div>
            <div style="display: flex;align-items: center;padding: 10px;">
                风格
                <el-select v-model="genre" placeholder="请选择" style="margin: 0 10px;" @input="changeInput">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>

    </div>
</template>
<script>
import request from "../axios/request";
export default {
    data() {
        return {
            smartBackground: false,
            AIDrawing: false,
            options: [{
                value: '浮雕',
                label: '浮雕'
            }, {
                value: '水彩',
                label: '水彩'
            }, {
                value: '复古',
                label: '复古'
            }, {
                value: '像素',
                label: '像素'
            }],
            genre: '',
            displayId: null
        }
    },
    methods: {
        async changeInput() {
            let resOfUpdateDisplayInfo = await request({
                url: "/api/display/updateDisplayInfo",
                method: "POST",
                data: {
                    smartBackground: this.smartBackground,
                    aiDrawing: this.AIDrawing,
                    genre: this.genre,
                    id: this.displayId
                }
            });
            if (resOfUpdateDisplayInfo.data.status == 200) {
                this.getDislpayInfo()
            }
        },
        async getDislpayInfo() {
            let resOfGettingDisplayInfo = await request({
                url: "/api/display/getDisplayInfo",
                method: "GET"
            });
            if (resOfGettingDisplayInfo.data.data != null) {
                this.displayId = resOfGettingDisplayInfo.data.data.id
                this.smartBackground = resOfGettingDisplayInfo.data.data.smartBackground
                this.AIDrawing = resOfGettingDisplayInfo.data.data.aiDrawing
                this.genre=resOfGettingDisplayInfo.data.data.genre
            }
        }
    },
    async mounted() {
        this.getDislpayInfo()
    }
}
</script>
<style></style>